<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lorenz</title>
</head>
<body>

</body>
<script>
    var renderer = new THREE.WebGLRenderer({ antialias: true });

    renderer.setSize(window.innerWidth, window.innerHeight);

    renderer.setClearColor("#000000");

    document.body.appendChild(renderer.domElement);

    var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);

    camera.position.set(0, 0, 75);

    var controls = new THREE.OrbitControls(camera);

    controls.target = new THREE.Vector3(0, 0, 20);

    controls.update();

    var scene = new THREE.Scene();

    var globalMaterial = new THREE.SpriteMaterial({
        map: new THREE.CanvasTexture(generateSprite()),

        blending: THREE.AdditiveBlending

    });

    var particles = [];

    var numOfParticles = 20000;

    var sigma = 10;

    var rho = 22;

    var beta = 8 / 3;

    var dt = 0.0085;

    for (var i = 0; i < numOfParticles; i++) {
        var material = new THREE.Sprite(globalMaterial);

        var x = void 0,

            y = void 0,

            z = void 0;

        if (i == 0) {
            x = y = z = 0.1;

        } else {
            x = particles[i - 1].material.position.x;

            y = particles[i - 1].material.position.y;

            z = particles[i - 1].material.position.z;

            var dx = sigma * (y - x);

            var dy = x * (rho - z) - y;

            var dz = x * y - beta * z;

            x += dx * dt;

            y += dy * dt;

            z += dz * dt;

        }

        var particle = new Particle(material, x, y, z);

        particle.material.scale.x = .3;

        particle.material.scale.y = .3;

        particle.material.scale.z = .3;

        particle.material.position.x = x;

        particle.material.position.y = y;

        particle.material.position.z = z;

        scene.add(particle.material);

        particles.push(particle);

    }

    dt = .0005;

    function render() {
        renderer.render(scene, camera);

        renderer.autoClearColor = false;

        for (var i = 0; i < numOfParticles; i++) {
            var _x = particles[i].material.position.x;

            var _y = particles[i].material.position.y;

            var _z = particles[i].material.position.z;

            var _dx = sigma * (_y - _x);

            var _dy = _x * (rho - _z) - _y;

            var _dz = _x * _y - beta * _z;

            _x += _dx * dt;

            _y += _dy * dt;

            _z += _dz * dt;

            particles[i].material.position.x = _x;

            particles[i].material.position.y = _y;

            particles[i].material.position.z = _z;

        }

        controls.update();

        requestAnimationFrame(render);

    }

    render();

    // Functions to generate particle and particle sprite

    function Particle(material, x, y, z) {
        this.material = material;

        this.material.position.x = x;

        this.material.position.y = y;

        this.material.position.z = z;

    }

    function generateSprite() {
        var canvas = document.createElement('canvas');

        canvas.width = 12;

        canvas.height = 12;

        var context = canvas.getContext('2d');

        var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);

        gradient.addColorStop(0, 'rgba(255,255,255,1)');

        gradient.addColorStop(0.2, 'rgba(255,50,50,1)');

        gradient.addColorStop(0.4, 'rgba(0,0,64,1)');

        gradient.addColorStop(1, 'rgba(0,0,0,1)');

        context.fillStyle = gradient;

        context.fillRect(0, 0, canvas.width, canvas.height);

        return canvas;

    }
</script>
</html>
